<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">代理商级别</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-button type="primary" @click="initForm();dialogVisible = true" icon="el-icon-circle-plus-outline" style="margin-bottom: 20px;">添加级别</el-button>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="name" label="名称"></el-table-column>
					<el-table-column prop="income_ratio" label="收入比例" ></el-table-column>
					<el-table-column prop="profit_ratio" label="分润比例" ></el-table-column>
					<el-table-column prop="modifytime" label="最后修改时间" ></el-table-column>
					<el-table-column prop="createtime" label="创建时间" ></el-table-column>
	
					<el-table-column label="操作" width="100" >
						<template slot-scope="scope">
							<el-button size="mini" @click="initForm(scope.row);dialogVisible = true">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination
					background
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					:pager-count="pageCount"
					prev-text="上一页"
					next-text="下一页"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>
		
		
		<el-dialog
		  :title="form.id ? '修改级别':'添加级别'"
		  :visible.sync="dialogVisible"
		  width="500px"
		  >
		  <el-form ref="form" :model="form" label-width="120px">
		    <el-form-item label="名称">
		      <el-input v-model="form.name" placeholder="请输入级别名称"></el-input>
		    </el-form-item>
		   <el-form-item label="收入比例(%)">
		     <el-input v-model="form.income_ratio"  type="number"  placeholder="请输入收入比例"></el-input>
		   </el-form-item>
		   <el-form-item label="分润比例(%)">
		     <el-input v-model="form.profit_ratio" type="number"  placeholder="请输入分润比例"></el-input>
		   </el-form-item>
		
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import { query,levelSave } from '@/api/level-management';
export default {
	name: 'level-management',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			dialogVisible:false,
			form:{
				id:'',
				name:'',
				income_ratio:'',
				profit_ratio:''
			}
		};
	},
	created() {
		this.getData();
	},
	methods: {
		initForm(item){
			if(item) {
				this.form = {...item}
			}else{
				this.form = {
					id:'',
					name:'',
					income_ratio:'',
					profit_ratio:''
				}
			}
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		},

		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};
			
			query(data).then(res => {
				if(res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				}else{
					this.$message.error(res.msg);
				}
			});
		},
		// 添加修改
		add() {
			let data = {};
			if(!this.form.name) {
				this.$message.error('请输入级别名称');
				return
			}
			if(!this.form.income_ratio) {
				this.$message.error('请输入收入比例');
				return
			}
			if(!this.form.profit_ratio) {
				this.$message.error('请输入分润比例');
				return
			}
			
			if (this.form.id) {
				data['l.id'] = this.form.id
			}
			data['l.name'] = this.form.name
			data['l.income_ratio'] = this.form.income_ratio
			data['l.profit_ratio'] = this.form.profit_ratio
			
			
			levelSave(data).then(res => {
				if(res.state) {
					this.$message({
					  message: res.msg,
					  type: 'success'
					});
					this.dialogVisible = false
					this.currentPage = 1
					this.getData()
				}else{
					this.$message.error(res.msg);
				}
			});
		},
		
	}
};
</script>
<style lang="scss" scoped>
	
</style>
